<template>
    <div class="pagination">
        <el-pagination
            v-if="total > 0"
            background
            :small="true"
            :page-sizes="paginations.pageSizes"
            :page-size="paginations.pageSize"
            :layout="paginations.layout"
            :total="total"
            :current-page="paginations.pageIndex"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange">
        </el-pagination>
    </div>
</template>

<script>
export default {
    name:"pagination",
    data(){
        return{
            paginations:{
                pageIndex:1,//当前位于哪页
                pageSize:10,//1页显示多少条
                pageSizes:[10,20,30,50],//每页显示多少条
                layout:"total, sizes, prev, pager, next, jumper"//翻页属性
            }
        }
    },
    props:{
        total:Number
    },
    methods:{
        // 上下分页 pageIndex
        handleCurrentChange(current){
            this.$emit('handleCurrentChange',current)
        },
        // 每页多少条切换 pageSize
        handleSizeChange(size){
            this.$emit('handleSizeChange',size)
        }
    }
}
</script>

<style lang="less" scoped>
    .pagination{
        text-align: right;
        padding: 10px 18px;
    }
</style>